<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>瓢城企训网</title>
    <link type="text/css" href="reset.css" rel="stylesheet">
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link  type="text/css" href="style.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" >
                        <img alt="Brand" src="images/logo.png">
                    </a>
                    <!--响应式的时候点击按钮-->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                       <li class="active">
                           <a href="index.html">
                               <span class=" glyphicon glyphicon-home" aria-hidden="true"></span>
                           首页</a>
                       </li>
                        <li>
                            <a href="information.html">
                                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                                资讯</a>
                        </li>
                        <li>
                            <a href="case.html">
                                <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
                                案例</a>
                        </li>
                        <li>
                            <a href="about.html">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                关于</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" style="background:#243442; ">
                <img src="images/slide1.png" alt="...">
            </div>
            <div class="item" style="background:#F5E5DD;">
                <img src="images/slide2.png" alt="...">
            </div>
            <div class="item"style="background:#DC292C;">
                <img src="images/slide3.png" alt="...">
            </div>

        </div>

        <!-- Controls -->
       <!-- glyphicon-chevron-left和glyphicon-chevron-right自适应垂直居中-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>
    <div class="tab1">
        <div class="container">
            <h2 class="tab1-h2">「 为什么选择瓢城企业培训 」</h2>
            <p class="tab1-p">强大的师资力量，完美的实战型管理课程，让您的企业实现质的腾飞！</p>
            <div class="row">
                <div class="col-md-6 col">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="images/tab1-1.png" alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程内容</h4>
                        <p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
                        <p>其他：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
                <div class="col-md-6 col">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="images/tab1-2.png" alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程内容</h4>
                        <p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
                        <p>其他：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
                </div>
            <div class="row">
                <div class="col-md-6 col" >
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="images/tab1-3.png" alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程内容</h4>
                        <p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
                        <p>其他：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
                <div class="col-md-6 col" >
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="images/tab1-4.png" alt="...">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程内容</h4>
                        <p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
                        <p>其他：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab2">
        <div class="container">
            <div class="row">
                <div class="auto col-md-6 col-sm-6 tab2-img ">
                    <a href="#">
                        <img class=" media-object img-responsive center-block" src="images/tab2.png" alt="...">
                    </a>
                </div>
                <div class=" text col-md-6 col-sm-6  tab2-text " >
                    <div class="media-body">
                        <h3 class="media-heading">强大的学习体系</h3>
                        <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="tab3">
        <div class="container">
            <div class="row">
                <div class=" auto col-md-6 col-sm-6 tab3-img">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-responsive center-block" src="images/tab3.png" alt="...">
                        </a>
                    </div>
                </div>
                <div class="text col-md-6 col-sm-6">

                        <h3 class="media-heading">强大的学习体系</h3>
                        <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>


                </div>
            </div>

        </div>
    </div>
    <div class="footer">
        <p>企业培训 | 合作事宜 | 版权投诉</p>
        <P>苏ICP备12345678. © 2009-2016 瓢城企训网. Powered by Bootstrap.</P>
    </div>

 </body>
</html>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    /*设置高度垂直居中*/
    $(window).load(function(){
        $('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2+'px')
    })
    $(window).resize(function(){
        $('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2+'px')

    })
    $(window).load(function(){
        $('.text').eq(1).css('margin-top',($('.auto').eq(1).height()-$('.text').eq(1).height())/2+'px')
    })
    $(window).resize(function(){
        $('.text').eq(1).css('margin-top',($('.auto').eq(1).height()-$('.text').eq(1).height())/2+'px')

    })
</script>